<template>
  <div>
    <div class="page login-page">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6">
              <div class="info d-flex align-items-center">
                <div class="content">
                  <div class="logo">
                    <h1>欢迎注册</h1>
                  </div>
                  <p>贝诺儿童健康管理系统</p>
                </div>
              </div>
            </div>
            <!-- Form Panel    -->
            <div class="col-lg-6 bg-white">
              <div class="form d-flex align-items-center">
                <div class="content">
                    <div class="form-group">
                      <input id="register-username" class="input-material" type="text" name="registerUsername" placeholder="请输入用户名/姓名" >
    							      <div class="invalid-feedback">
    							        	用户名必须在2~10位之间
    							      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-password" class="input-material" type="password" name="registerPassword" placeholder="请输入密码"   >
                    	<div class="invalid-feedback">
    							        	密码必须在6~10位之间
    							      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-passwords" class="input-material" type="password" name="registerPasswords" placeholder="确认密码"   >
                    	<div class="invalid-feedback">
    							        	两次密码必须相同 且在6~10位之间
    							      </div>
                    </div>
                    <div class="form-group">
                      <button id="regbtn" type="button" name="registerSubmit" class="btn btn-primary" >注册</button>
                    </div>
                  <small>已有账号?</small><a href="#/children" class="signup" >&nbsp;登录</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  $(function(){
  	/*错误class  form-control is-invalid
  	正确class  form-control is-valid*/
  	var flagName=false;
  	var flagPas=false;
  	var flagPass=false;
  	/*验证用户名*/
  	var name,passWord,passWords;
  	$("#register-username").change(function(){
  		name=$("#register-username").val();
  		if(name.length<2||name.length>10){
  			$("#register-username").removeClass("form-control is-valid")
  			$("#register-username").addClass("form-control is-invalid");
  			flagName=false;
  		}else{
  			$("#register-username").removeClass("form-control is-invalid")
  			$("#register-username").addClass("form-control is-valid");
  			flagName=true;
  		}
  	})
  	/*验证密码*/
  	$("#register-password").change(function(){
  		passWord=$("#register-password").val();
  		if(passWord.length<6||passWord.length>18){
  			$("#register-password").removeClass("form-control is-valid")
  			$("#register-password").addClass("form-control is-invalid");
  			flagPas=false;
  		}else{
  			$("#register-password").removeClass("form-control is-invalid")
  			$("#register-password").addClass("form-control is-valid");
  			flagPas=true;
  		}
  	})
  	/*验证确认密码*/
  	$("#register-passwords").change(function(){
  		passWords=$("#register-passwords").val();
  		if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){
  			$("#register-passwords").removeClass("form-control is-valid")
  			$("#register-passwords").addClass("form-control is-invalid");
  			flagPass=false;
  		}else{
  			$("#register-passwords").removeClass("form-control is-invalid")
  			$("#register-passwords").addClass("form-control is-valid");
  			flagPass=true;
  		}
  	})
  	$("#regbtn").click(function(){
        console.log("sad");
  		if(flagName&&flagPas&&flagPass){
      
  			localStorage.setItem("name",name);
  			localStorage.setItem("passWord",passWord);
  			location="login.html"
  		}else{
  			if(!flagName){
  				$("#register-username").addClass("form-control is-invalid");
  			}
  			if(!flagPas){
  				$("#register-password").addClass("form-control is-invalid");
  			}
  			if(!flagPass){
  				$("#register-passwords").addClass("form-control is-invalid");
  			}
  		}
  	})
  })
</script>

<style>
</style>
